<template>
  <div class="title">表格内添加动态表单</div>
  <div class="text">如果要使用校验，需要使用el-form、el-el-form-item进行包裹使用</div>
  <div class="Box">
    <div class="top">
      <div><span>字典列表</span></div>
      <el-button type="primary" @click="addItem"><span class="addItem">添加字典</span></el-button>
    </div>
    <div class="content">
      <el-form :model="formData">
        <el-table stripe border :data="formData.list">
          <el-table-column label="序号" width="180">
            <template #default="scope">
              <el-form-item :prop="'list.' + scope.$index + '.id'" :rules="formData.rules.id">
                <el-input v-model.trim="scope.row.id" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.name" @click="fn(scope)" />
            </template>
          </el-table-column>
          <el-table-column label="编码" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.code" @click="fn(scope)" />
            </template>
          </el-table-column>
          <el-table-column label="值描述">
            <template #default="scope">
              <el-input v-model="scope.row.text" @click="fn(scope)" />
            </template>
          </el-table-column>
          <el-table-column label="值描述">
            <template #default="scope">
              <el-button v-if="scope.$index !== 0" @click="moveUp(scope)">上移</el-button>
              <el-button
                v-if="scope.$index !== Number(formData.list.length - 1)"
                @click="moveDown(scope)"
                >下移</el-button
              >
              <el-button @click="deleteItem(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue'
const formData = reactive({
  // 表格表单数据
  list: [
    {
      id: '1',
      name: '字典1',
      code: '2245',
      text: '测试数据-字典1'
    },
    {
      id: '2',
      name: '字典2',
      code: '2245',
      text: '测试数据-字典2'
    },
    {
      id: '3',
      name: '字典3',
      code: '2245',
      text: '测试数据-字典3'
    }
  ],
  // 校验规则
  rules: {
    id: [{ required: true, message: '请输入id', trigger: 'blur' }]
  }
})

const fn = val => {
  const a = `formData.${val.$index}.id`
  console.log(val, formData.list.length)
}
const addItem = () => {
  formData.list.push({
    id: '',
    name: '',
    code: '',
    text: ''
  })
}
const deleteItem = val => {
  formData.list.splice(val.$index, 1)
}
const moveUp = val => {
  const obj1 = formData.list[val.$index]
  const obj2 = formData.list[val.$index - 1]
  formData.list.splice(val.$index - 1, 2, obj1, obj2)
}
const moveDown = val => {
  const obj1 = formData.list[val.$index + 1]
  const obj2 = formData.list[val.$index]
  formData.list.splice(val.$index, 2, obj1, obj2)
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 20px;
}
.top {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .addItem {
    cursor: pointer;
  }
}
.content {
  width: 1000px;
  :deep(.el-form-item:not(.is-error)) {
    margin-bottom: 0px;
  }
}
</style>
